<template>
  <el-dialog :title="dialog.title" :visible.sync="dialog.showDialog" :close-on-click-modal="false" :before-close="handleClose" :modal-append-to-body="true" :close-on-press-escape="false" :width="dialog.width">
    <!-- 新增公告 addnotice -->
    <div v-if="data.addnotice">
      <div class="notice">
        <div class="title">标题：</div>
        <el-input size="small" v-model="data.noticeTitle" placeholder="输入标题" style="width:300px;"></el-input>
      </div>
      <div class="notice">
        <div class="title">来源：</div>
        <el-input size="small" v-model="data.noticeOrigin" placeholder="输入来源" style="width:300px;"></el-input>
      </div>
      <div class="notice">
        <div class="title">内容：</div>
        <quill-editor :editordata="editordata['noticecontent']" @editor="editor"></quill-editor>
      </div>
      <div class="notice">
        <div class="title">发布人：</div>
        <el-input size="small" v-model="data.noticeAuthor" placeholder="输入发布者" style="width:300px;"></el-input>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" v-if="data.addnotice">
      <el-button type="primary" @click="FnDialog(data)" size="small">确定</el-button>
      <el-button type="info" @click="handleClose" size="small">取消</el-button>
    </div>
    <!-- 修改公告 editnotice -->
    <div v-if="data.editnotice">
      <div class="notice">
        <div class="title">标题：</div>
        <el-input size="small" v-model="data.noticeTitle" placeholder="输入标题" style="width:300px;"></el-input>
      </div>
      <div class="notice">
        <div class="title">来源：</div>
        <el-input size="small" v-model="data.noticeOrigin" placeholder="输入来源" style="width:300px;"></el-input>
      </div>
      <div class="notice">
        <div class="title">内容：</div>
        <quill-editor :editordata="editordata['noticecontent']" @editor="editor"></quill-editor>
      </div>
      <div class="notice">
        <div class="title">发布者：</div>
        <el-input size="small" v-model="data.noticeAuthor" placeholder="输入发布者" style="width:300px;"></el-input>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" v-if="data.editnotice">
      <el-button type="primary" @click="FnDialog(data)" size="small">确定</el-button>
      <el-button type="info" @click="handleClose" size="small">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import QuillEditor from "@/components/quillEditor.vue";
export default {
  components: {
    QuillEditor
  },
  props: {
    dialog: {
      type: [Object, Array],
      default: () => {
        return {
          showDialog: false, //弹窗显示
          title: "标题", //弹窗标题
          width: "500px", //弹窗宽度
          data: {} //弹窗数据
        };
      }
    }
  },
  data() {
    return {
      timeStart: new Date(),
      // 编辑器
      editordata: {
        noticecontent: {
          qeref: "noticecontent",
          content: ""
        }
      },
      imgUrl: "",
      img: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      }
    };
  },
  created() { },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 点击树
    handleNodeClick(data, node) {
      // console.log(this.list.length,data.favoriteLevel)
      // return false;
      let obj = {
        favoriteId: data.favoriteId,
        favoriteLevel: data.favoriteLevel,
        favoriteName: data.favoriteName
      };
      this.list = [];
      let nodeData = node;
      while (nodeData.parent != null) {
        this.list.unshift({
          favoriteId: nodeData.data.favoriteId,
          favoriteLevel: nodeData.data.favoriteLevel,
          favoriteName: nodeData.data.favoriteName
        });
        nodeData = nodeData.parent;
      }
    },
    // 返回父组件
    FnDialog(obj, shenpiDialog) {
      let timeStart = this.timeStart;
      let timeEnd = new Date();
      if (timeEnd - timeStart >= 1000) {
        if (this.data.choosecategory) {
          obj.list = this.list;
        }
        if (this.data.editnotice || this.data.addnotice) {
          this.$emit("FnDialog", {
            type: "submit",
            data: obj,
            content: this.editordata.noticecontent.content,
            imgUrl: this.imgUrl,
            img: this.img
          });
        } else if (this.data.shenpiDialog) {
          obj.knowledgeExamineStatus = shenpiDialog;
          this.$emit("FnDialog", { type: "submit", data: obj });
        } else {
          this.$emit("FnDialog", { type: "submit", data: obj });
        }

        this.timeStart = timeEnd;
      }
    },
    // 取消或关闭
    handleClose(done) {
      this.$emit("FnDialog", { type: "close" });
    },
    // 编辑器事件
    editor(val) {
      console.log(val);

      this.editordata[val.qeref].content = val.content;
      this.imgUrl = val.imgUrl;
      this.img = val.img
    }
  },
  computed: {
    data() {
      if (this.dialog.data.editnotice || this.dialog.data.addnotice) {
        this.editordata.noticecontent.content = this.dialog.data.noticeDetail;
      }
      if (this.dialog.data.choosecategory) {
        this.collectTree = this.dialog.data.children;
      }
      return this.dialog.data;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper >>> .el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #e4e4e4;
  }
  .el-dialog__body {
    padding: 10px;
  }
  .el-tree-node__expand-icon.expanded {
    transform: rotate(0);
  }
  .el-tree-node__expand-icon.is-leaf {
    color: #c0c4cc;
  }
  .breadcrumb {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .el-tree {
    width: 100%;
    height: 240px;
    overflow: auto;
  }
  .shenpi-item {
    font-size: 14px;
    display: flex;
    margin-bottom: 10px;
    .title {
      width: 75px;
    }
    .el-textarea {
      flex: 1;
    }
  }
  .notice {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .title {
      width: 75px;
    }
    .edit_container {
      flex: 1;
      min-width: 500px;
    }
  }
  .n-center {
    justify-content: space-between;
  }
}
</style>
